<!DOCTYPE html>
<html>

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">


<title>H+ 后台主题UI框架 - 数据表格</title>
<meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
<meta name="description"
	content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

<link rel="shortcut icon" href="favicon.ico">
<link href="${ctxPath!}/static/hplus/css/bootstrap.min.css?v=3.3.5"
	rel="stylesheet">
<link href="${ctxPath!}/static/hplus/css/font-awesome.min.css?v=4.4.0"
	rel="stylesheet">

<!-- Data Tables -->
<link
	href="${ctxPath!}/static/hplus/css/plugins/dataTables/dataTables.bootstrap.css"
	rel="stylesheet">

<link href="${ctxPath!}/static/hplus/css/animate.min.css"
	rel="stylesheet">
<link href="${ctxPath!}/static/hplus/css/style.min.css?v=4.0.0"
	rel="stylesheet">
<base target="_blank">


</head>
@var userOffice = office.getUserOfficeList(); //用户持有的机构 @var userRoles =
role.getUserRoleList(); //用户角色
<body class="gray-bg">
	<div class="wrapper wrapper-content animated fadeInRight">
		<div class="row">
			<div class="col-sm-12">
				<div class="ibox float-e-margins">
					<div class="ibox-title">
						<h5>
							基本 <small>分类，查找</small>
						</h5>
						<div class="ibox-tools">
							<a class="collapse-link"> <i class="fa fa-chevron-up"></i>
							</a> <a class="dropdown-toggle" data-toggle="dropdown"
								href="table_data_tables.html#"> <i class="fa fa-wrench"></i>
							</a>
							<ul class="dropdown-menu dropdown-user">
								<li><a href="table_data_tables.html#">选项1</a></li>
								<li><a href="table_data_tables.html#">选项2</a></li>
							</ul>
							<a class="close-link"> <i class="fa fa-times"></i>
							</a>
						</div>
					</div>
					<div class="ibox-content">
						<!-- <div class="">
                            <a  href="#" id="addUser111"  class="btn btn-primary J_menuItem">添加</a>
                        </div> -->
						<!-- <div class="text-right">
	                        <button id="addUser" class="btn btn-primary"><i class="fa fa-dollar"></i> 新增</button>
	                    </div> -->

						<div class="text-center">
							<a data-toggle="modal" class="btn btn-primary"
								href="${ctxPath!}/sysuser/list#modal-form">打开登录窗口</a>
						</div>

						<table
							class="table table-striped table-bordered table-hover dataTables-example">
							<thead>
								<tr>
									<th class="center">姓名</th>
									<th class="center">归属机构</th>
									<th class="center">角色</th>
									<th class="center">用户名</th>
									<th class="center">电话</th>
									<th class="center">邮箱</th>
									<th class="center">最后登录IP</th>
									<th class="center">最后登录时间</th>
									<th class="center">操作</th>
								</tr>
							</thead>
							<tbody>
								@for(item in page.list){
								<tr>
									<td class="center"><a href="javascript:;"
										data-title="<${item.name!}>详情" data-mode="detail"
										data-url="${ctxPath}/sysuser/detail/showlayer"
										data-data="{id:'${item.id}'}">${item.name!}</a></td>
									<td class="center">@var sostr =
										office.getOfficeStrByOfficeId(item.officeId);
										@if(!isEmpty(sostr)){ &nbsp;(${sostr}) @}</td>
									<td class="center"><a href="${ctxPath}/sysuser/detail"
										data-url="${ctxPath}/sysuser/detail/showlayer"
										data-data="{id:'${item.id}'}">${item.name!}</a></td>
									<td class="center">${item.roles!}</td>
									<td class="center">${item.mobile!}</td>
									<td class="center">${item.email!}</td>
									<td class="center">${item.loginIp!}</td>
									<td class="center">${item.loginDate!,dateFormat="yyyy-MM-dd
										HH:mm:ss"}</td>
									<td class="center">
										<div class="hidden-sm hidden-xs action-buttons">

											<a class="green" href="javascript:void(0);" title="编辑"
												data-mode="page" data-title="${item.name!}编辑"
												data-url="${ctxPath}/sysuser/edit/add"
												data-data="{id:'${item.id}'}" data-width="50%"> <i
												class="ace-icon fa fa-pencil bigger-130"></i>
											</a> <a class="red" href="javascript:void(0);" title="删除"
												data-mode="del" data-title="删除操作" data-msg="你确定删除此数据吗?"
												data-url="${ctxPath}/sysuser/delete"
												data-data="{id:'${item.id}'}"> <i
												class="ace-icon fa fa-trash-o bigger-130"></i>
											</a>
										</div>
									</td>
								</tr>
								@}
							</tbody>
							<tfoot>
								<tr>
									<th colspan="9" align="center">汇总</th>

								</tr>
							</tfoot>
						</table>

					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="modal-form" class="modal fade" aria-hidden="true"
		data-dismiss="modal">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-body">
					<div class="row">
						<div class="col-sm-12 b-r">
							<h3 class="m-t-none m-b">添加用户</h3>
							<form role="form" class="form-horizontal m-t" id="signupForm"
								method="post" action="${ctxPath}/sysuser/save">
								<div class="form-group">
									<label class="col-sm-3 control-label">真实姓名：</label>
									<div class="col-sm-8">
										<input id="name" name="name" value="${user.name!}"
											class="form-control" type="text"> <span
											class="help-block m-b-none"><i
											class="fa fa-info-circle"></i> 这里写点提示的内容</span>
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label">登录名：</label>
									<div class="col-sm-8">
										<input id="username" name="username" value="${user.username!}"
											class="form-control" type="text" aria-required="true"
											aria-invalid="false" class="valid">
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label">密码：</label>
									<div class="col-sm-8">
										<input id="password" name="password" value=""
											class="form-control" type="text" aria-required="true"
											aria-invalid="true" class="error"> <span class="red">*不填写则不修改</span>
									</div>
								</div>


								<div class="form-group">
									<label class="col-sm-3 control-label">电话：</label>
									<div class="col-sm-8">
										<input id="mobile" name="mobile" value="${user.mobile!}"
											class="form-control">
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label">手机：</label>
									<div class="col-sm-8">
										<input id="phone" name="phone" value="${user.phone!}"
											class="form-control" type="phone">
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label">E-mail：</label>
									<div class="col-sm-8">
										<input id="email" name="email" value="${user.email!}"
											class="form-control" type="email">
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label">工号：</label>
									<div class="col-sm-8">
										<input id="no" name="no" value="${user.no!}"
											class="form-control" type="email">
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-3 control-label">描述：</label>
									<div class="col-sm-8">
										<textarea name="remarks"
											class="autosize-transition form-control "
											style="resize: none;">${user.remarks!}</textarea>
									</div>
								</div>


								<div>
									<button class="btn btn-sm btn-primary pull-right m-t-n-xs"
										type="submit">
										<strong>登录</strong>
									</button>
									<label> <input type="checkbox" class="i-checks">自动登录
									</label>
								</div>
							</form>
						</div>

					</div>
				</div>
			</div>
		</div>
	</div>

	<script src="${ctxPath!}/static/hplus/js/jquery.min.js?v=2.1.4"></script>
	<script src="${ctxPath!}/static/hplus/js/bootstrap.min.js?v=3.3.5"></script>
	<script
		src="${ctxPath!}/static/hplus/js/plugins/jeditable/jquery.jeditable.js"></script>
	<script
		src="${ctxPath!}/static/hplus/js/plugins/dataTables/jquery.dataTables.js"></script>
	<script
		src="${ctxPath!}/static/hplus/js/plugins/dataTables/dataTables.bootstrap.js"></script>
	<script src="${ctxPath!}/static/hplus/js/content.min.js?v=1.0.0"></script>


	<script>
		$(document).ready(function() {
			$(".dataTables-example").dataTable();
		});
		
		$("#addUser").click(function(){
			window.location.href="${ctxPath}/sysuser/add";
			/*  var diag = new top.Dialog();
			 diag.Drag=true;
			 diag.Title ="新增";
			 diag.URL = '${ctxPath}/sysuser/add';
			 diag.Width = 525;
			 diag.Height = 551;
			 diag.Top="65%";
			 diag.CancelEvent = function(){ //关闭事件
				
				diag.close();
			 }; */
			 diag.show();  
			//iframe层-父子操作
			/* layer.open({
			  type: 2,
			  area: ['700px', '530px'],
			  fix: true, //不固定
			  maxmin: true,
			  content: '${ctxPath}/sysuser/add'
			}); */
			
			//iframe窗
			/* layer.open({
			  type: 2,
			  title: false,
			  closeBtn: 0, //不显示关闭按钮
			  shade: [0],
			  area: ['340px', '215px'],
			 // offset: 'rb', //右下角弹出
			 offset: ['300px', '200px'],
			 
			  shift: 2,
			  content: ['${ctxPath}/sysuser/add', 'no'] //iframe的url，no代表不显示滚动条
			  
			}); */
			
			
			
		});
		
	</script>


</body>

</html>